<template>
	<view class="content">
		<view class="fixed">
			<cu-custom bgColor="bg-shadeTop text-white">
				<block slot="content">房叮当</block>
			</cu-custom>
		</view>
		<!-- 轮播广告 -->
		<swiper class="screen-swiper" indicator-dots="true" autoplay="true" circular="true" indicator-active-color="#ffffff">
			<swiper-item v-for="($swiper, index) in swiperList" :key="index" @tap="toSwiper($swiper)">				
				<image mode="aspectFill" :src="picUrlPrefix + $swiper.picUrl"></image>
			</swiper-item>
		</swiper>
		<view class="cu-list grid col-2 "> <!-- no-border -->
			<view class="cu-item" v-for="(item,index) in gridOptions" :key="index" @click="handleGridClick(item)">
				<view v-if="item.image" class="cuIcon-">
					<image :src="item.image" mode="" style="width: 50px; height: 50px;"></image>
					<view class="cu-tag badge" v-if="item.badge!=0">
						<block v-if="item.badge!=1">{{item.badge>99?'99+':item.badge}}</block>
					</view>
				</view>
				<view v-else :class="['cuIcon-' + item.cuIcon,'text-' + item.color]">
					<view class="cu-tag badge" v-if="item.badge!=0">
						<block v-if="item.badge!=1">{{item.badge>99?'99+':item.badge}}</block>
					</view>
				</view>
				<text>{{item.name}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				picUrlPrefix: '../../static/images/index/',
				swiperList: [
					{ picUrl: 'banner-1.jpg' }, 
					{ picUrl: 'banner-2.jpg' },
					{ picUrl: 'banner-3.jpg' }
				],
				gridOptions: [	
					{
						cuIcon: 'cardboardfill',
						color: 'red',
						badge: 3,
						name: '筑房通',
						path: '/pages/zhu-fang-tong/index'
					}, {
						cuIcon: 'recordfill',
						color: 'orange',
						badge: 1,
						name: '筑房租'
					}, 
					 {
						cuIcon: 'noticefill',
						// image: "https://img-cdn-qiniu.dcloud.net.cn/img/lindang.png",
						color: 'olive',
						badge: 0,
						name: '筑房贷'
					},
					{
						cuIcon: 'picfill',
						color: 'blue',
						badge: 0,
						name: '个人租房信息查询'
					}
				]
			}
		},
		onLoad() {

		},
		methods: {
			toSwiper () {
				
			},
			handleGridClick(obj){
				console.log(obj)
				uni.navigateTo({
					url: obj.path,
					fail: function () {
						uni.showToast({
							title: '抱歉，该功能在开发中',
							icon: 'none'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.bg-shadeTop {
		background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.01));
		color: #ffffff;
	}
	.fixed {
		position: fixed;
		z-index: 99;
	}
</style>
